<style>
    .dir-select { background-color: #FFE6B0;border: 1px #FFB951 solid; }
    .img-list .item { cursor: pointer; float: left; position: relative; width: 104px; height: 104px; line-height: 102px; text-align: center; font-size: 0; margin-right: 10px; margin-bottom: 10px; overflow: hidden; }
    .img-list .item:nth-child(6n) { margin-right: 0; }
    .img-list .item { background: #f5f5f5; border: 2px solid #f5f5f5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    .img-list .item:hover { border-color: #1E9FFF; }
    .img-list .item > img { max-height: 100%; }
    .img-list .item.selected { border-color: #1E9FFF; }
    .img-list .item.selected:before { position: absolute; content: ' '; display: block; right: 0; top: 0; border: 14px solid #1E9FFF; border-left-color: transparent; border-bottom-color: transparent; z-index: 1; }
    .img-list .item.selected:after { font-size: 0; position: absolute; content: ' ';display: block; right: 4px; top: -3px; z-index: 2; width: 6px;height: 12px;border-color: #fff;border-style: solid;border-width: 0 3px 3px 0;transform: rotate(45deg);}
</style>
<div class="layui-card js-view-imgspace m0">
    <div class="layui-card-header">
        <span>我的图片</span>
        <button class="layui-btn layui-btn-normal layui-btn-sm ml10 pr" type="button" style="top: -1px;" lay-upload lay-data="{ url:'{:U('Upload/index')}?type=images' }"><i class="layui-icon"></i>上传图片</button>
    </div>
    <div class="layui-card-body flex" style="height: 500px;">
        <div class="h" style="width: 110px;border-right: 1px solid #f0f0f0;overflow: hidden; overflow-y: auto;">
            {foreach $list as $key=>$item}
            <div data-path="{$item}" class="js-path mb5 vm pointer layui-unselect {$key==0?'dir-select':''}">
                <img src="/static/images/dir_close.png" class="pr vm" style="top:-1px;"/><span class="ml5 vm">{$item}</span>
            </div>
            {/foreach}
        </div>
        <div class="cell h pl15 img-list layui-border-box" style="overflow: hidden; overflow-y: auto;"></div>
    </div>
</div>
<script src="/plugins/jquery/jquery.lazyload.js" type="text/javascript"></script>
<script>
    (function () {
        var $view = $('.js-view-imgspace'), multiple = '{$multiple?1:0}';
        $('.js-path', $view).on('click', function () {
            var $this = $(this), name = $this.data('path'),
                list = $this.data('list');
            if (list) {
                $this.addClass('dir-select').siblings().removeClass('dir-select');
                $('.img-list', $view).html(list).data('slist', []);
                $('.img-list .item img', $view).lazyload({
                    data_attribute: 'src',
                    container: $('.img-list', $view)
                });
                return false;
            }
            $.loading.show();
            $.post('{:U("Index/imgspace")}', { name: name }, function (rs) {
                $.loading.hide();
                $this.data('list', rs);
                $('.img-list', $view).html(rs).data('slist', []);
                $this.addClass('dir-select').siblings().removeClass('dir-select');
                $('.img-list .item img', $view).lazyload({
                    data_attribute: 'src',
                    container: $('.img-list', $view)
                });
            });
        });
        $('.js-path.dir-select', $view).trigger('click');

        $view.on('click', '.img-list>.item', function () {
            var slist = $('.img-list', $view).data('slist') || [],
                url = $(this).data('url');
            if ($(this).is('.selected')) {
                var idx = $.inArray(url, slist);
                idx > -1 && slist.splice(idx, 1);
                $(this).removeClass('selected');
            } else {
                $(this).addClass('selected');
                if (multiple <= 0) {
                    slist = [url];
                    $(this).siblings().removeClass('selected');
                } else {
                    slist.push(url);
                }
            }
            $('.img-list', $view).data('slist', slist);
            return false;
        });

    })();
</script>